.message-page{
  width:100%;
  height:100%;
  .message-title{
    position:fixed;
    left:0;
    width:100%;
    height:116rpx;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-bottom:1rpx solid #E1E6EB;
    z-index:1000;
    .title-items{
      flex:1;
      font-size:36rpx;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:#D3D7DC;
      line-height:50rpx;
      padding:30rpx 0; 
    }
    .items-border-right{
      border-right:4rpx solid #E1E6EB;
    }
    .title-highlight{
      color:#FF5470;
    }
  }
  .msg-tab-box{
    width:100%;
    height:100%;
    overflow:hidden; 
    position:relative;
    .msg-tab-content{
      height:100%;
      width:100%;
      // overflow-y: scroll;
      position:absolute;  
    }
    .msg-tab-one{
      transform:translate(-100%, 0px) translateZ(0px); 
      transition:all .4s;
    }
    .msg-tab-two{
      transform:translate(100%, 0px) translateZ(0px); 
      transition:all .4s;
    }
    .msg-tab-index{
      transform:translate(0px, 0px) translateZ(0px); 
      transition:all .4s; 
    }

    .msg-im{
      height:100%;
      width:100vw;
      .msg-search-box{
        display:flex;
        align-items: center;
        // margin-top:116rpx;
        margin-bottom:52rpx;
        .search-icon{
          flex:0 0 110rpx;
          height:112rpx;
          line-height: 112rpx; 
          padding-top:9rpx;
          .icon{ 
            width:40rpx;
            height:42rpx;
          }
        }
        .search-input{
          flex:1;
          padding:26rpx 14rpx; 
          font-size:32rpx;
          border-bottom:1rpx solid #E1E6EB;
        }
        input::-webkit-input-placeholder{
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:#D3D7DC;
        }
      }
      .msg-group-title{
        font-size:36rpx;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:#FF5470;
        padding-left:30rpx;
        margin-bottom:40rpx;
      }
      .msg-list-null{
        font-size:24rpx;
        padding:40rpx 0;
        color:#D3D7DC;
      }
      .new-pair{
        overflow:hidden;
        background:#fff;
        white-space:nowrap;   
        margin-bottom:32rpx;
        .scroll-view{ 
          .praise-total{
            width:160rpx;
            display:inline-block;
            margin-right:32rpx;
            font-size:32rpx;
            .pair-box{
              width:160rpx;
              height:172rpx;
              position: relative;
              .img{
                width:100%;
                height:100%;
                border-radius: 50%;
              }
              .pair-num{
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background:transparent;
                line-height: 162rpx; 
                color:#fff; 
                font-family:PingFangSC-Medium;
                font-weight:500; 
              }
              .like-other{
                position:absolute;
                left: 50%;
                bottom:-16rpx;
                margin-left:-31rpx;
                width:62rpx;
                height:40rpx;
              }
              .lightning{
                position:absolute;
                left: 50%;
                bottom:-16rpx;
                margin-left:-11rpx;
                width:22rpx;
                height:36rpx;
              }
              .super-like-other{
                position:absolute;
                left: 50%;
                bottom:-16rpx;
                margin-left:-18rpx;
                width:36rpx;
                height:36rpx;
              }
            }
            .user-pair{
              width:160rpx;
              height:160rpx;
            }
            .text{
              margin-top:6rpx;
              color:#4E5761;
            }
            .name{
              width:100%;
              margin-top:18rpx;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            &:first-child{
              margin-left:30rpx;
            }
          }

        }
      }
      .msg-list{
        width:100%;
      }
      
      

    } 
    .pair-page{
      //  margin-top:116rpx;
       padding-bottom:30rpx;
    }


  }
}

.message-group{
  width:100%;
  height:198rpx;
  padding-left:30rpx;
  display:flex;
  align-items:center;
  justify-content:center;
  .message-head{
    flex:0 0 160rpx;
    height:160rpx;
    position:relative;
    .head-img{
        width:100%;
        height:100%;
        border-radius:50%;
    }
    .on-line{
      position:absolute;
      bottom:0;
      right:0;
      width:36rpx;
      height:36rpx;
      background:#50E370;
      border:2rpx solid #fff;
      border-radius:50%;
    }
}
.message-info-box{
  flex:1; 
  height:198rpx;
  border-bottom:1rpx solid #E1E6EB;
  margin-left:18rpx;
  display:flex;
  align-items:center;
  justify-content:center;
}
.message-info{ 
    .message-info-title{
      width:100%;
      padding-right:30rpx;
      .name{
        width:300rpx;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:36rpx;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:#354052;
      }
      .info-icon{
          margin-left:20rpx;
          vertical-align: middle;
      }
      .like-other{
          width:62rpx;
          height:40rpx;
      }
      .lightning{ 
          width:22rpx;
          height:36rpx;
      }
      .super-like-other{ 
          width:36rpx;
          height:36rpx;
      }
      .total{
          min-width:38rpx;
          min-height:38rpx;
          line-height:38rpx;
          background:#FF8C54;
          border-radius:50%;
          font-size:22rpx; 
          color:#fff;
      }
  }
    .message-im-text{ 
      width:520rpx;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      margin-top:18rpx;
      color:#808892;
      font-size:28rpx;
      font-family:PingFangSC-Medium;
      font-weight:500;  
    }
  }
}